<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  Architecture
-->
<div ng-controller="ARTEMIS.SendMessageController">

  <div class="tabbable" ng-model="tab">

    <div value="compose" class="tab-pane" title="Compose">
      <!--
         title="Compose a new message to send"
      -->

      <div class="row-fluid">
        <span ng-show="noCredentials" class="alert">
          No credentials set for endpoint!  Please set your username and password in the <a
            href="" ng-click="openPrefs()">Preferences</a> page
        </span>

        <form class="form-inline pull-right">
          <div class="row-fluid">
            <div class="controls">
              <label class="control-label" for="durable" title="Is this message durable">Durable: </label>
              <input id="durable" type="checkbox" ng-model="durable" value="true">
            </div>
          <button class="btn" ng-click="addHeader()" title="Add a new message header"><i
              class="icon-plus"></i> Header
          </button>
          <button type="submit" class="btn btn-primary" ng-click="sendMessage(durable)">Send message</button>
        </form>
      </div>

      <form class="form-inline bottom-margin" ng-submit="addHeader()">
        <ol class="zebra-list header-list">
          <div class="row-fluid">
            <li ng-repeat="header in headers">
              <div class="span4">
                <input type="text" style="width: 100%" class="headerName"
                       ng-model="header.name"
                       typeahead="completion for completion in defaultHeaderNames() | filter:$viewValue"
                       typeahead-editable='true'
                       placeholder="Header name">
              </div>
              <div class="span6">
                <input type="text" style="width: 100%" ng-model="header.value"
                       placeholder="Value of the message header">
              </div>
              <div class="span2">
                <button type="submit" class="btn" title="Add a new message header">
                  <i class="icon-plus"></i>
                </button>
                <button type="button" ng-click="removeHeader(header)" class="btn" title="Removes this message header">
                  <i class="icon-remove"></i>
                </button>
              </div>
            </li>
          </div>
        </ol>
      </form>

      <div class="row-fluid">
        <form class="form-inline">
          <div class="controls">
            <label class="control-label" for="sourceFormat" title="The text format to use for the message payload">Payload
              format: </label>
            <select ng-model="codeMirrorOptions.mode.name" id="sourceFormat">
              <option value="javascript">JSON</option>
              <option value="text" selected>Plain text</option>
              <option value="properties">Properties</option>
              <option value="xml">XML</option>
            </select>

            <button class="btn" ng-click="autoFormat()"
                    title="Automatically pretty prints the message so its easier to read">Auto format
            </button>
          </div>
        </form>
      </div>

      <div class="row-fluid">
        <textarea ui-codemirror="codeMirrorOptions" ng-model="message"></textarea>
      </div>
    </div>
    </tab>

    <div ng-switch="showChoose">
      <div ng-switch-when="true">
        <div value="choose" class="tab-pane" title="Choose">
          <!--
                   title="Choose messages to send from the available files in the Profile configuration for this container">
          -->
          <div class="row-fluid bottom-margin">
        <span ng-show="noCredentials" class="alert">
          No credentials set for endpoint!  Please set your username and password in the <a
            href="#/preferences">Preferences</a> page
        </span>
            <button type="submit" ng-disabled="!fileSelection().length" class="btn btn-primary pull-right"
                    ng-click="sendSelectedFiles()">
              <ng-pluralize count="fileSelection().length"
                            when="{'0': 'No files selected', '1': 'Send the file','other': 'Send {} files'}">
              </ng-pluralize>
            </button>
          </div>

          <p>Choose which files to send from the profile configuration:</p>

          <div class="control-group inline-block">
            <input class="search-query" type="text" ng-model="searchText" placeholder="Filter..." autofocus>
          </div>

          <ul>
            <li ng-repeat="fileName in profileFileNames | filter:searchText">
              <input type="checkbox" ng-model="selectedFiles[fileName]"> {{fileName}}
            </li>
          </ul>
        </div>
      </div>

    </div>

  </div>
</div>
